import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'

@Component({
  selector: 'app-ex0401',
  templateUrl: './ex0401.component.html',
  styleUrls: ['./ex0401.component.scss']
})
export class Ex0401Component implements OnInit, AfterViewInit {
  protected cnv: any
  protected ctx: any

  @ViewChild('canvas')
  set canvas(ref: ElementRef) {
    this.cnv = ref.nativeElement
    this.ctx = ref.nativeElement.getContext('2d')
  }

  constructor() {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    // this.draw1(this.ctx)
    // this.draw2(this.ctx)

    // this.draw3(this.ctx)
    // this.draw4(this.ctx)
    // this.draw5(this.ctx)
    this.draw6(this.ctx)
  }

  draw1(ctx): void {
    ctx.lineWidth = 5
    ctx.moveTo(20, 20)
    ctx.lineTo(180, 20)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineWidth = 10
    ctx.moveTo(20, 70)
    ctx.lineTo(180, 70)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineWidth = 15
    ctx.moveTo(20, 120)
    ctx.lineTo(180, 120)
    ctx.stroke()
  }

  draw2(ctx): void {
    ctx.lineWidth = 5
    ctx.arc(70, 70, 50, 0, -Math.PI / 2, false)
    ctx.stroke()
  }

  draw3(ctx): void {
    ctx.lineWidth = 16

    ctx.moveTo(20, 20)
    ctx.lineTo(180, 20)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineCap = 'round'
    ctx.moveTo(20, 70)
    ctx.lineTo(180, 70)
    ctx.stroke()

    ctx.beginPath()
    ctx.lineCap = 'square'
    ctx.moveTo(20, 120)
    ctx.lineTo(180, 120)
    ctx.stroke()
  }

  draw4(ctx): void {
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(50, 100)
    ctx.lineTo(100, 100)
    ctx.lineWidth = 12
    ctx.lineCap = 'round'
    ctx.stroke()
  }

  draw5(ctx): void {
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(50, 100)
    ctx.lineTo(100, 100)
    ctx.lineWidth = 12
    // ctx.lineJoin = 'miter'
    // ctx.lineJoin = 'round'
    ctx.lineJoin = 'bevel'
    ctx.stroke()
  }

  draw6(ctx): void {
    ctx.strokeStyle = 'red'
    ctx.setLineDash([10, 5])
    ctx.strokeRect(50, 50, 80, 80)
  }
}
